<script setup lang="ts">
import { useRoute } from 'vue-router'
import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
const route = useRoute()
const { proxy } = getCurrentInstance()

/* ---- */
const animName = ref()
// ----
const curTabs = ref()
// ----
const items = [{
  show: true,
  icon: 'fal fa-house-chimney xw-color-11',
  style: 'TBX-icon xw-radius-round xw-shadow xw-bg-white',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'UcenTer') }
}]

/* ---- */
const layerBox = ref()

/* ---- */
watch(() => route.meta, (to, from) => {
  const toIndex = to.index
  const fromIndex = from.index || toIndex
  if (Number(toIndex) >= Number(fromIndex)) {
    animName.value = 'slide-left'
  } else {
    animName.value = 'slide-right'
  }
})
watchEffect(() => {
  animName.value = 'slide-left'
  curTabs.value = route.meta.tabs || false
})
</script>

<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition :name="animName">
        <component :is="Component" />
      </transition>
    </router-view>
    <tabfix-view :cur-tabs="curTabs" :items="items"/>
    <layer-view ref="layerBox"/>
  </div>
</template>
